<template>
    <div id="index">
        <mt-header fixed title="享得美" class="mt-header"></mt-header>
        <!-- 轮播图 -->
        <div class="page-swipe">
            <mt-swipe :auto="4000">
                <mt-swipe-item v-bind:class="{slide1:true}">.</mt-swipe-item>
                <mt-swipe-item v-bind:class="{slide2:true}">享得美.</mt-swipe-item>
                <mt-swipe-item v-bind:class="{slide3:true}">.</mt-swipe-item>
            </mt-swipe>
        </div>
    
        <!-- 热门地点 -->
        <div id="indexHotPlace">
            <div class="cell">
                <mt-cell title="热门地点">
                    <mt-cell style="color: green" to="#" is-link>更多</mt-cell>
                </mt-cell>
            </div>
    
            <div id="hotPlaces">
                <mt-button id="hotPlace1" class="hotPlaces">广州</mt-button>
                <button id="hotPlace2" class="hotPlaces">长沙</button>
                <button id="hotPlace3" class="hotPlaces">重庆</button>
                </br>
                <button id="hotPlace4" class="hotPlaces">大理</button>
                <button id="hotPlace5" class="hotPlaces">西藏</button>
                <button id="hotPlace6" class="hotPlaces">丽江</button>
            </div>
        </div>
    
        <!-- 热门活动 -->
        <div id="indexHotActivity">
            <div class="cell">
                <mt-cell title="热门文章">
                    <mt-cell style="color: green" to="#" is-link>更多</mt-cell>
                </mt-cell>
            </div>
    
            <div id="hotActivities" v-for="item in messagelist">
                <div class="hotActivities" id="hotA1">
                    <img :src="'http://localhost:3000/' +  item.rating " class="hotIcon" />
                     <p>
                    <p class="activityTittle">{{item.title}}</p>
                    <mt-button  @click="showDetail(item._id)" class="goBtn">查看</mt-button>
                  </div>
    
            </div>
    
        </div>
     <div class="geshi"></div>
  
    </div>
</template>

<script>
export default {
    name: 'home',
    data() {
        return {
            messagelist: []
        }
    },
    created() {
        // 获取信息渲染列表
        this.$store.dispatch({
            type: 'getMessage',
            callback: (result) => {
                this.messagelist = result.data;

            }
        });
    },
    methods: {
        // 路由跳转
        showDetail(_id) {
      this.$router.push(`/item/${_id}`)
    },


    }
}
</script>
<style>
/*header*/

.mint-header {
    background-color:rgb(254,0,0);
}



/*轮播图*/

.page-swipe {
    width: 100%;
}

.page-swipe .mint-swipe {
    height: 200px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}

.page-swipe .mint-swipe-item {
    line-height: 200px;
}

.page-swipe .slide1 {
    background-color:rgb(254,0,0);
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-swipe .slide2 {
    /* background-image: url('../assets/slide2.jpg'); */
      background-color:rgb(84,93,87);
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-swipe .slide3 {
    /* background-image: url('../assets/slide3.jpg'); */
     background-color:rgb(255,255,255);
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-swipe-desc {
    text-align: center;
    color: #666;
    margin-bottom: 5px;
}

.my-btn-box {
    margin-top: 50px;
}

.geshi{
    width: 100%;
    height: 550px;
  
}

/*cell*/

.cell {
    margin-top: 0
}

#kong{
    height:400px;
    width:100px;
}

/*hotPlaces*/

#hotPlaces {
    text-align: center;
}

.hotPlaces {
    width: 100px;
    height: 100px;
    padding: 0px;
    margin-top: 8px;
    border: none;
    font-size: 15px;
    color: white;
    font-weight: bold;
}

#hotPlace1 {
    background-image: url('../assets/hotPlace1.jpg');
}

#hotPlace2 {
    background-image: url('../assets/hotPlace2.jpg');
}

#hotPlace3 {
    background-image: url('../assets/hotPlace3.jpg');
}

#hotPlace4 {
    background-image: url('../assets/hotPlace4.jpg');
}

#hotPlace5 {
    background-image: url('../assets/hotPlace5.jpg');
}

#hotPlace6 {
    background-image: url('../assets/hotPlace6.jpg');
}



/*hotActivities*/

#hotActivities {
    width: 100%;
 


}

.hotActivities {
    width:162px;
    height: 235px;
    border: 1px solid gray;
    float: left;
    padding:7px;
 
}

.hotActPic {
    width: 180px;
    height: 200px;
}

.activityTittle {
    font-size: 20px;

    font-weight: bold
}

.hotIcon {
    width:160px;
    height:160px;
    float: left;
}

.hotNum {
    font-size: 14px;
    float: left;
    line-height: 2px;
 
}

.goBtn {
   
    height: 30px;
    width:100px;
    background-color: rgb(254,0,0);
    color: white;
    border: none;

}
</style>
